<template>
	<u-navbar :leftIconSize="42" titleStyle="font-size:20px;font-weight:600" :autoBack="true" :placeholder='true'
		title="学员名单">
	</u-navbar>
	<view class="flex-jc-s-b" style="padding: 10px 15px 0 15px;">
		<view class="" style="border: 1px solid #C8C8C8;width: calc(100% - 60px);border-radius: 16px;">
			<u-search v-model="data.request.orderItemDo.name" @search="search" :searchIconSize="38" :placeholder="'搜索学员姓名'"
				:showAction="false" :clearabled="false" :height="60"></u-search>
		</view>
		<view class="flex-al-center" @click="data.selectShow=true" style="color: #666666;font-size: 12px;">
			<image style="width: 14px;height: 14px;margin-right: 5px" src="../../static/image/mine/date.png" mode="">
			</image>
			<text>筛选</text>
		</view>
	</view>
  <u-popup :closeable="!true" mode="bottom" :round="8" :show="data.selectShow"
           @close="data.selectShow=false">
    <view class="" style="height: 200px;padding: 15px;">
      <view style="float: right">
        <view class="" style="transform: translateY(-4px);" @click="data.selectShow=false">
          <u-icon name="close" color="#999999 " size="30"></u-icon>
        </view>
      </view>
      <view class="flex-jc-s-b" style="margin: 20px 0 10px 0;">
        <text style="font-weight: bold;font-size: 14px;
						font-family: PingFang SC-Bold, PingFang SC;">日期</text>
      </view>
      <view class="flex-jc-s-b" style="color: #D3D3D3 ;font-size: 15px; margin-top: 15px">
        <text class="date-text" @click="data.dateShow=true">{{data.request.payDateStart||'开始日期'}}</text>
        <view class="" style="background-color: #333333 ;height: 1px;width: 8px;margin: 0 8px;">
        </view>
        <text class="date-text" @click="data.dateShow=true">{{data.request.payDateEnd||'结束日期'}}</text>
      </view>
      <view class="flex-jc-s-b" style="margin-top: 26px;">
        <u-button shape='circle'
                  :customStyle="{width: '170px',height: '40px','margin':'0 9px 0 0',padding:'0',border:'1px solid #F7F7F7'}"
                  type="" @click="clearRequest" text="重置">
        </u-button>
        <u-button shape='circle'
                  :customStyle="{width: '170px',height: '40px','margin':'0 0 0 9px',padding:'0'}"
                  type="primary" @click="data.list=[],paging(),data.selectShow = false" text="确定">
        </u-button>
      </view>
    </view>
  </u-popup>
	<u-calendar :title="'日期筛选'" :closeOnClickOverlay="true" :show="data.dateShow" :mode="'range'" :monthNum="30"
			:minDate="data.minDate" :maxDate="data.maxDate" allowSameDay="true" showMark="true" @close="data.dateShow=false" rowHeight="112"
			@confirm="confirm"></u-calendar>
  <empty :config="{text:'您还没有学员名单'}" v-if="data.resultTotal==0&&data.list.length==0" />
	<view v-else class="padding-30rpx" style="background-color: #F7F7F7;">
		<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
			<view class="white-bg" v-for="list,index in  data['list']"
				style="margin-bottom: 15px;border-radius: 8px;padding: 0 15px;">
				<view class="flex-jc-s-b" :class="list.itemList.length !== 0? 'mine-cell' : ''"
					style="font-size: 12px;font-weight: 400;padding: 10px 0;">
					<text style="font-size: 14px;font-weight: bold;">
						{{list.num||''}}({{list.itemAmount+'名学员'}})</text>
					<text style="color: #666666;">{{list.createTime}}</text>
				</view>
				<view class="flex-jc-s-b  white-bg" style="color:#666666;padding:15px 0"
					v-for="(item,index) in list.itemList"
					:class="index == list.itemList.length-1?'':'mine-cell'"
					@click="goTrainRecord(item)">
					<view class="flex-column" style="align-items: flex-start;width: auto;">
						<view class="" style="color: #333333;">
							<text style="font-weight: bold;font-size: 15px;">{{item.name}}</text>
							<text style="margin-left: 5px;font-size: 13px;">{{item.idCard||''}}</text>
							<text v-if="item.refundStatusCode === 'success'" class="label-pain-gary" style="margin-left: 5px;">{{'已退款'}}</text>
              <text v-if="item.studentCourseStatus === 1" class="label-pain-gary" style="margin-left: 5px;">{{'已失效'}}</text>
						</view>
						<text style="margin-top: 3px;font-size: 12px;color: #666666">{{item.courseName||''}}</text>
					</view>
					<view class="" style="white-space: nowrap;">
						<text
							style="margin-right: 2px; font-size: 18px;font-weight: bold;font-family: DIN-Bold;"
              :style="(item.refundStatusCode === 'success' || item.studentCourseStatus === 1)? {color: '#666666'} : {color: '#EB5940'}"><text style="font-size: 13px">￥</text>{{item.price||0}}</text>
						<text style="font-size: 13px;">/{{item.dayAmount||0}}天</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script setup>
	import { onMounted, reactive } from "vue";
	import { pagingApi } from './const.js'
  import pageRoute from '../../utils/pageRoute'
  import empty from '@/pages/components/empty.vue'
  import {getLastYear, getNextMonth} from '../../utils/timeStamp'
	const data = reactive({
		dateShow: false,
    selectShow: false,
    maxDate: getNextMonth(),
    minDate: getLastYear(),
		list: [],
		request: {
      orderItemDo: {
        name: '',
        studentCourseStatus: '' //学员课程状态:状态 1未审核 2已通过 3已过期 4禁用
      },
			"itemName": '',
			"payDateStart": "",
			"payDateEnd": "",
      "statusCode": 'onlyPaid', //订单状态：paying-待付款，paidAuditing-支付审核中，paid-已支付（包括待结算），cancel-已取消， onlyPaid-已付款
			"pageDomain": {
				"pageNum": "1",
				"pageSize": "5",
				"orderByColumn": "",
				"isAsc": "",
				"reasonable": ""
			}
		},
		resultTotal: 0
	})
	onMounted(() => {
		paging()
	})
	const paging = () => {
		pagingApi(data.request).then((res) => {
			data.list.push(...res.rows)
			data.resultTotal = res.total
		}).catch(() => {
			data.resultTotal = 0
		})
	}
	const search = () => {
    data.list = []
		data.request.pageDomain.pageNum = 1
		paging()
	}
	const confirm = (date) => {
		if (date.length > 0) {
			data.request.pageDomain.pageNum = 1
			data.request.payDateStart = date[0]
			data.request.payDateEnd = date[date.length - 1]
      data.dateShow=false
		}
	};
  const clearRequest = () => {
    data.request.payDateStart = ''
    data.request.payDateEnd = ''
    data.selectShow = false
    data.list = []
    paging()
  }

  function goTrainRecord(item) {
    if(item.refundStatusCode !== 'success' && item.studentCourseStatus !== 1) {
      pageRoute.route('pages/student/detail', {studentCourseId: item.studentCourseId, name: item.name})
    }
  }

	function lower(e) {
    if ((data.resultTotal <= data.list.length) || data.resultTotal === 0) { return }
    data.request.pageDomain.pageNum++
    paging()
	}

</script>

<style lang="scss" scoped>
  .mine-cell {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
	.label-pain-gary {
		border-radius: 2px;
		color: #999999;
		font-size: 11px;
		border: 1px solid #D9D9D9;
		padding: 1px 3px;
	}

	.scroll-Y {
		height: calc(100vh - 74px - 90px);
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		border: 1px solid red;
		font-size: 36rpx;
	}

  .date-text {
    width: 160px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    background: #FFFFFF;
    border-radius: 2px;
    border: 1px solid #E7E7E7;
  }
</style>
